/* eslint-disable indent */
<template>
  <div class="listManage">
    <div class="search">
      <!-- <el-input v-model="inputSearch" placeholder="评分表名称" class="input"></el-input> -->
      <input
        type="text"
        v-model="inputSearch"
        placeholder="评分表名称"
        @keyup="searchList"
      />
      <button type="primary" @click="searchList">查询</button>
      <!-- <el-button type="primary" @click="searchList">查询</el-button> -->
    </div>
    <div class="table">
      <div class="tableContent">
        <el-table :data="tableList" border style="width: 100%" v-loading="loading">
          <el-table-column label="ID" align="center" prop="id" width="80">
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template slot-scope="scope">
              <span @click="showDetail(scope.row)" class="itemName">{{
                scope.row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="老师人数" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.teacherCount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学生人数" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.studentCount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间 " width="150" align="center">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px"> {{ scope.row.createtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <div class="tableBtn">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <img
                    src="@/assets/delete.png"
                    alt=""
                    @click="handleDelete(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <img
                    src="@/assets/update.png"
                    alt=""
                    @click="editItem(scope.row)"
                  />
                </el-tooltip>
              </div>

              <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <!-- <el-pagination layout="prev, pager, next" :total="totalcount"> </el-pagination> -->
        <el-pagination
          v-model="paging"
          background
          layout="prev, pager, next"
          :total="paging.total"
          :page-size="paging.pageSize"
          :current-page="paging.page"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <EditScoreList
      ref="child"
      :currentId="currentId"
      @getDetails="getList"
    ></EditScoreList>
  </div>
</template>

<script>
import EditScoreList from './EditScoreList.vue';
import {getScoreList, deleteScoreList} from '../../api/scoreManage/score.js';
export default {
  components: {
    EditScoreList
  },
  data() {
    return {
      loading: true,
      inputSearch: '',
      tableList: [],
      currpage: 1,
      paging: {
        page: 1,
        pageSize: 12,
        total: 20,
        userId: 1
      },
      currentId: 1
    };
  },
  methods: {
    // 点击删除按钮
    handleDelete(val) {
      console.log(val);
      this.open(val.id);
    },
    open(id) {
      this.$confirm('确认删除该评分表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteScoreList({id});
        // console.log(res);
        if (res.code) {
          this.getList();
          this.$message({
            showClose: true,
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '删除失败'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          showClose: true,
          message: '已取消删除'
        });
      });
    },
    // 获取列表
    async getList() {
      const res = await getScoreList({p: this.paging.page, ps: this.paging.pageSize});
      console.log('列表', res);
      this.tableList = res.data.records;
      this.paging.total = res.data.total;
      if (res.code === 200) {
        this.loading = false;
      }
    },
    // 用户点击搜索
    async searchList() {
      console.log('搜索的内容', this.inputSearch);
      const res = await getScoreList({p: this.paging.page, ps: this.paging.pageSize, name: this.inputSearch});
      console.log(res);
      if (res.code) {
        this.tableList = res.data.records;
        // this.$message({
        //   showClose: true,
        //   type: 'success',
        //   message: '搜索成功!'
        // });
        this.paging.total = res.data.total;
      }
    },
    // 点击跳转到详情页
    showDetail(val) {
      console.log(val.id);
      this.$router.push({
        path: '/scoreDetails',
        query: {id: val.id}
      });
    },
    handleCurrentChange(currentPage) {
      this.paging.page = currentPage;
      this.searchList();
    },
    // 点击编辑
    editItem(val) {
      console.log(val);
      this.currentId = val.id;
      this.$refs.child.openEdit(this.currentId);
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style scoped lang="less">
.listManage {
  // padding: 0 20px;
  width: 100%;
  .search {
    padding: 0 20px;
    width: 90%;
    height: 65px;
    display: flex;
    align-items: center;
    input {
      width: 225px;
      height: 35px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #ccd9f9;
      padding: 0;
      outline: none;
      box-sizing: border-box;
      padding-left: 30px;
    }
    // input::placeholder{
    //     margin-left: 20px;
    //     color: #2fc0e0;
    //   }
    button {
      width: 85px;
      height: 35px;
      background: #2fc0e0;
      box-shadow: 0 0 5px #2fc0e0;
      border-radius: 2px;
      color: white;
      margin-left: 20px;
    }
  }
  .table {
    // margin-right: 20px;
    // padding-left: 20px;
    // margin: 0 20px;
    padding: 0 20px;
    text-align: center;
    table {
      text-align: center;
    }
    .tableContent {
      box-shadow: 0px 1px 2px 0px #b9b9b9;
      margin-bottom: 10px;
      padding: 0 40px;
      background-color: #ffffff;
      /deep/.el-table__body tr,
      /deep/.el-table__body td {
        padding: 0;
        height: 45px !important;
        font-size: 14px;
        color: #555555;
      }
      /deep/.el-table th {
        color: #333333;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 14px;
      }
    }
  }
}
.tableBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    cursor: pointer;
    width: 31px;
    height: 31px;
    margin: 0 10px;
  }
}
.el-pagination {
  margin: 20px auto;
  padding-bottom: 20px;
  /deep/.btn-prev {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
  /deep/.btn-next {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
}
.itemName {
  color: #2fc0e0;
  cursor: pointer;
}
.itemName:hover {
  // color: #2fc0e0;
  text-decoration: underline;
}
/deep/.el-icon-arrow-left:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-icon-arrow-right:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-pager li {
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 32px;
  border-radius: 50% !important;
  background-color: #faf9ff !important;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
  color: #ffffff !important;
  box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
}
/deep/ .el-progress-bar__outer {
  background-color: #e8f8fb;
}
/deep/ .el-progress-bar__outer {
  height: 20px !important;
}
/deep/ .el-progress-bar__innerText {
  font-size: 12px;
  font-family: DIN Alternate Bold;
}
/deep/ .el-progress.is-exception .el-progress-bar__inner {
  background-image: linear-gradient(90deg, #2fc0e0);
  text-align: center;
}
/deep/ .el-button--success {
  background-color: #f0fff6;
  border-color: #f0fff6;
}
/deep/ .el-button--success .el-icon-switch-button {
  font-size: 20px;
  color: #59d088;
}
/deep/ .el-select__caret {
  transition: none;
  transform: rotateZ(0deg);
  margin-right: 5px;
}
/deep/ .el-icon-arrow-up::before {
  content: "";
  width: 39px;
  height: 39px;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid #ccd9f9;
  background: url("~@/assets/triangle.png") no-repeat center center;
  background-size: 12px 21px;
}
button {
  cursor: pointer;
}
</style>
